import { Tree } from 'antd';
import React from 'react';
import { connect } from 'dva';
import Item from 'antd/lib/list/Item';

const TreeNode = Tree.TreeNode;

@connect(({ add, theme, video }) => ({
    add: add,
    video: video,
    theme: theme
}))
export default class TreeList extends React.Component {
    /**
     * 0 视频
     * 1 资讯
     * 2 直播
     * 3 专题
     * 4 服务
     */
    state = {
        activeModal: '',
        plate_id: '',
        treeData: []
    }

    componentDidMount() {
        this.props.onRef(this)
        let loginModal = this.props.video.loginModal
        const { treeList, treeListVideo } = this.props.add;
        console.log("this.props.add",this.props.add);
        const permission = JSON.parse(localStorage.getItem('permissionzx')) || []
        let newTreeList = [...treeList]
        //判断是否可以引用  banner
        let arr1 = [1,3,6,7,8];
        newTreeList.map((item, index)=>{
            if(item.children&&item.children.length>0){
                item.children = item.children.filter(i => (arr1.indexOf(i.template_id)  !== -1))
            }else{
                if(arr1.indexOf(item.template_id) === -1){
                    delete newTreeList[index]
                }
            }
        })

        //登陆返回 可用组件
        let arr = [];
        // console.log(this.props.video);
        if(loginModal.module_list){
            loginModal.module_list.map((item,index)=>{
                switch (item.module_name) {
                    case 'fcvideo':
                        arr.push({
                            title: '视频组件',
                            key: '0',
                            children: treeListVideo
                        })
                        break;
                    case 'fcinformation':
                        if(this.props.isBanner){
                            arr.push({
                                title: '资讯组件',
                                key: '1',
                                children: treeList
                            })
                        }
                        break;
                    case 'videoa01':
                        // arr.push({
                        //     title: '直播组件',
                        //     key: '2',
                        //     children: []
                        // })
                        break;
                    case 'fcinformation_theme':
                        arr.push({
                            title: '专题组件',
                            key: '3',
                            children: []
                        })
                        break;
                    case 'fcfind':
                        // arr.push({
                        //     title: '服务组件',
                        //     key: '4',
                        //     children: []
                        // })
                        break;
                    case 'fslive':
                        if(permission.indexOf('info_use_live')>-1){
                            arr.push({
                                title: '直播组件',
                                key: '5',
                                children: []
                            })
                        }
                        break;
                    case 'fcvideo_theme':
                        arr.push({
                            title: '视频专辑',
                            key: '6',
                            children: []
                        })
                        break;
                    default:
                        break;
                }
            })
            if(this.props.isBanner === 1){
                arr.push({
                    title: '资讯组件',
                    key: '1',
                    children: newTreeList
                })
            }
            if(this.props.isBanner != 1){
                arr.push({
                    title: '服务组件',
                    key: '4',
                    children: []
                })
            }
            // console.log(arr,'arr');
            this.setState({
                treeData: arr
            })
        }
    }

    onSelect = (selectedKeys, info) => {
        this.props.resetSelect()
        if(info.selectedNodes[0]){
            let key = info.selectedNodes[0].key
            let data = info.selectedNodes[0].props
            let keyArr = key.split("-")
            //视频
            if (keyArr[0] == 0) {
                let dataAugment = {
                    index: 1,
                    status: 2,
                    page_size: 10,
                    plate_id: data.plate_id
                }

                this.props.dispatch({ type: 'add/getTableListVideo', payload: { dataAugment: dataAugment } });
                this.props.dispatch({ type: 'add/saveBannerPlateID', data: data.plate_name });
                this.setState({
                    activeModal: 0,
                    plate_id: data.plate_id
                })
            }
            //资讯
            if (keyArr[0] == 1) {
                let dataAugment = {
                    index: 1,
                    status: 2,
                    page_size: 10,
                    plate_id: data.plate_id,
                    module_name: 1
                }
                this.props.dispatch({ type: 'add/getTableList', payload: { dataAugment: dataAugment } });
                this.setState({
                    activeModal: 1,
                    plate_id: data.plate_id
                })
            }
            //专题
            if (keyArr[0] == 3) {
                let dataAugment = {
                    index: 1,
                    page_size: 10
                }
                this.props.dispatch({ type: 'add/themeList', payload: { dataAugment: dataAugment } });
                this.setState({
                    activeModal: 3
                })
            }
            //发现
            if (keyArr[0] == 4) {
                let dataAugment = {
                    index: 1,
                    page_size: 10
                }
                this.props.dispatch({ type: 'add/serviceList', payload: { dataAugment: dataAugment } });
                this.setState({
                    activeModal: 4
                })
            }
             //直播
             if (keyArr[0] == 5) {
                let dataAugment = {
                    page: 1,
                    limit: 10,
                    putaway:1
                }
                const baseUrl=this.props.add.configJson&&this.props.add.configJson.saas_domain
                const access_key=this.props.add.configJson&&this.props.add.configJson.access_key
                this.props.dispatch({ type: 'add/liveList', payload: {baseUrl,access_key, dataAugment: dataAugment } });
                this.setState({
                    activeModal: 5
                })
            }
              //视频专辑
              if (keyArr[0] == 6) {
                let dataAugment = {
                    page: 1,
                    limit: 10
                }
                this.props.dispatch({ type: 'add/videothemeList', payload: { dataAugment: dataAugment } });
                this.setState({
                    activeModal: 6
                })
            }
            this.props.resetIndex()
        }
    }

    render() {
        // console.log(this.state.treeData,'174');
        const loop = datas => datas.map((item) => {
            if (item.children && item.children.length) {
                return <TreeNode key={item.key} title={item.title} plate_id={item.plate_id}
                plate_name={item.plate_name} disabled={true}>{loop(item.children)}</TreeNode>;
            }
            return <TreeNode key={item.key} plate_name={item.plate_name} title={item.title} plate_id={item.plate_id} />;
        });
        return (
            <Tree
                showLine
                defaultExpandedKeys={['0-0-0']}
                onSelect={this.onSelect}
                defaultExpandParent
                autoExpandParent
            >
                {loop(this.state.treeData)}
            </Tree>
        );
    }
}
